<template>
  <view
    class="action-button"
    hover-class="hovering"
    :class="{ disabled, 'plain-disabled': plainDisabled }"
    @click="onClick"
  >
    <text v-if="text">{{ text }}</text>
    <slot v-else></slot>
  </view>
</template>

<script setup lang="ts">
import { vibrate } from '@/utils/mpHelper'

const props = defineProps<{
  // 按钮是否被禁用 (完全禁用操作)
  disabled?: boolean
  // 按钮是否被禁用 (仅样式禁用 仍然触发事件)
  plainDisabled?: boolean
  // 按钮是否点击时振动
  vibrate?: boolean
  // 按钮文本
  text?: string
}>()
const emit = defineEmits<{
  (e: 'click'): void
}>()

function onClick() {
  if (props.disabled) return

  props.vibrate && vibrate()
  emit('click')
}
</script>

<style lang="less">
@import './actionStyles.less';

.action-button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: @normal-color;
  transition: background-color 0.2s ease;
  .font-style;

  &.hovering {
    background-color: @hover-color;
  }
  &.plain-disabled,
  &.disabled {
    color: @disabled-font-color;
  }
  &.disabled {
    pointer-events: none;
  }

  > view,
  > track-button > .track-button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 22rpx;
    box-sizing: border-box;
  }
}
</style>
